<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          clearable
          placeholder="地址查询"
          auto-top
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumRenewType"
          v-model="params['renew_type.eq']"
          placeholder="续贷类型"
          clearable
          @change="getData()"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button class="btn-long" type="primary" @click="onPeriodList" icon="el-icon-plus">
          续贷
        </el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <in-loan-list :visible.sync="showListVisible" @success="getData()"></in-loan-list>

    <continue-edit-dialog
      :visible.sync="editVisible"
      :form-data="editData"
      @success="getData()"
    ></continue-edit-dialog>
    <el-dialog
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      :before-close="beforeClose"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="续贷信息">
          <continue-view :form-data="viewData"></continue-view>
        </el-tab-pane>
        <el-tab-pane label="附件信息">
          <attach-view :query-id="viewId" :visible="viewVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import baseMixins from '@/credit/views/city/bus/normal/mixins'
import SelectAddress from '@/components/select/SelectAddress'
import InLoanList from '@/credit/views/city/bus/normal/postloan/continue/InLoanList'
import ContinueEditDialog from '@/credit/views/city/bus/normal/postloan/continue/ContinueEditDialog'
import AttachView from '@/credit/components/AttachView'
import ContinueView from '@/credit/views/city/bus/normal/postloan/continue/ContinueView'
import { enumRenewType } from '@/credit/views/city/bus/normal/postloan/enum'
export default {
  components: {
    SelectAddress,
    InLoanList,
    ContinueEditDialog,
    AttachView,
    ContinueView,
  },
  mixins: [baseMixins],
  props: {},
  data() {
    return {
      enumRenewType,
      tableName: 'renewal_loan_28_view',
      tableData: [],
      params: {
        index: 1,
        size: 15,
        'gua_type.eq': '',
        'channel_type.eq': '',
      },
      order: {
        create_time: 'desc',
      },
      showListVisible: false,
      tableCount: 0,
      tableColumns: [
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', minWidth: '110px' } },
        // { attrs: { label: '贷款金额(万元)', prop: 'reply_funds', align: 'center' } },
        // { attrs: { label: '在保余额(万元)', prop: 'cur_left_funds', align: 'center' } },
        // { attrs: { label: '放款日期', prop: 'loadDate', align: 'center', minWidth: '100px' } },
        // { attrs: { label: '到期日期', prop: 'loadEndDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '续贷类型', prop: 'renew_type', align: 'center' },
          process: v => enumRenewType[v],
        },
        {
          attrs: { label: '续贷金额(万元)', prop: 'renew_funds', align: 'center', width: '90px' },
        },
        { attrs: { label: '续贷开始日期', prop: 'exhDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '续贷结束日期', prop: 'exhEndDate', align: 'center', minWidth: '100px' },
        },
        {
          attrs: { label: '操作', align: 'center', width: '100px' },
          operations: [
            {
              content: '修改续贷信息',
              icon: 'fa fa-edit',
              event: this.handlerEdit,
              ifRender: row => +(row.approval_status || '') === 4,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handlerView,
            },
          ],
        },
      ],

      editVisible: false,
      editData: {},

      viewVisible: false,
      viewData: {},
      viewId: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.viewVisible = false
    },
    handlerView(row) {
      this.viewVisible = true
      this.viewData = { ...row }
      this.viewId = row.customer_related_id
    },
    handlerEdit(row) {
      this.editVisible = true
      this.editData = { ...row }
    },
    dataAdapter(item) {
      item.exhDate = this.$utils.dateFormat(item.renew_loan_start_date, 'yyyy-MM-dd') || '-'
      item.exhEndDate = this.$utils.dateFormat(item.renew_loan_end_date, 'yyyy-MM-dd') || '-'
      // item.loadDate = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd') || '-'
      // item.loadEndDate = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd') || '-'

      return item
    },
    onPeriodList() {
      this.showListVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
